<template>
    <div id="proidVideo">
    	<el-row>
    		<el-col :span="16" :offset="4">
    			<el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
				  <el-breadcrumb-item :to="{ path: '/' }">玖玖盈</el-breadcrumb-item>
				  <el-breadcrumb-item>往期视频回顾</el-breadcrumb-item>
				</el-breadcrumb>
		    	<ul class="video-list">
		    		<li v-for="(video, i) in videoData" :key="i">

		    			<a :href="video.url" target="_blank" class="video-target">
                            <div class="thumb">
                                <img :src="UPLOAD_URL + video.imgUrl" alt="">
                            </div>
                            <div class="priod-text">
                                <div class="video-title">{{video.title}}</div>
                                <div class="video-time">{{formatTime(video.addTime)}}</div>
                            </div>
		    			</a>
		    		</li>
		    	</ul>
    		</el-col>
    	</el-row>
        <el-pagination @current-change="currentChange" :current-page.sync="pageId" :page-size="pageSize" layout="prev, pager, next, jumper" :total="count" class="x-paginations">
        </el-pagination>
    </div>
</template>
<script>
import { getPeriodVideo } from '@/api/api'
export default {
    data: function() {
        return {
            videoData: [],
            pageSize: 10,
            pageId: 1,
            count: 0
        }
    },
    created: function() {
        this.pageId = parseInt(this.$route.query.pageId) || 1;
        this.getVideo()
    },
    methods: {
        getVideo: function(){
            getPeriodVideo({ params: { pageSize: this.pageSize, pageId: this.pageId } }).then(res => {
                this.videoData = res.list;
                this.count = parseInt(res.count);
            })
        },
    	formatTime: function(time) {
            var date = new Date(time);
            var year = date.getFullYear();
            var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
            var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
            var mins = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
            var sec = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
            return year + '-' + month + '-' + day + ' ' + hours + ':' + mins + ':' + sec;
        },
        currentChange: function(val) {
            this.$router.push('?pageId=' + val)
            this.pageId = val;
            this.getVideo()
        }
    }
}

</script>
<style scoped>
.video-list{
	list-style: none;
	padding-left: 0;
}
.video-list li{
	margin: 10px 0;
	padding: 5px;
	/*border: 1px solid #c5c0c0;*/
	border-radius: 2px;
	transition: all .3s linear;
}
.video-target{
	width: 100%;
	/*height: 100%;*/
	display: block;
	text-decoration: none;
	transition: all .3s linear;
	color: #5a5f67;
    overflow: hidden;
    zoom: 1;
}
.video-list li:hover{
	box-shadow: 0 3px 18px 0 rgba(0, 0, 0, .3);
}
.video-list li:hover .video-target{
	color: #c32525;
}
.priod-text {
    /*width: calc(100% - 240px);*/
    display: inline-block;
    margin: 5px 15px;
    float: left;
    line-height: 30px;
}
.video-time{
	font-size: 14px;
}
.video-title {
    font-size: 14px;
    font-weight: bold;
    white-space: pre-wrap;
    word-break: break-all;
    display: inline-block;
}
.thumb {
    width: 200px;
    height: 100%;
    min-height: 110px;
    background-color: rgba(0, 0, 0, .1);
    float: left;
    font-size: 0;
}

.thumb img {
    width: 100%;
    height: 100%;
}
</style>
